import React, { PureComponent } from 'react';
import { Card, Steps } from 'antd';

const { Step } = Steps;

export default class BatchUpload extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      stepList: [],
    };
  }

  componentDidMount() {
    this.getchildren();
  }

  // 获取父组件children
  getchildren = () => {
    const { children } = this.props;
    const propsStepList = [];
    React.Children.map(children, (child, index) => {
      propsStepList.push({
        title: child.props.title,
        key: index,
      });
    });
    this.setState({ stepList: propsStepList });
  };

  render() {
    const { children, currentStep } = this.props;
    const { stepList } = this.state;
    const stepName = stepList.map(step => <Step key={step.key} title={step.title} />);
    const getChild = current => {
      const stepChild = React.Children.map(children, (child, index) => {
        if (index === current) {
          return child;
        }
        return null;
      });
      return stepChild;
    };
    return (
      <Card bordered={false}>
        <Steps current={currentStep}>{stepName}</Steps>
        {getChild(currentStep)}
      </Card>
    );
  }
}
